<template>
  <div class="c-main">
    <LeftContainer ref="leftContainerRef" @change="handleChangeTabs" @write="handleWrite" @active="handleActive" />
    <RightContainer ref="rightContainerRef" @change="handleRightChangeTabs" :active-record="activeRecord" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LeftContainer from '@/components/LeftContainer.vue'
import RightContainer from '@/components/RigthContainer.vue'

const leftContainerRef = ref(null)
const rightContainerRef = ref(null)

const handleWrite = () => {}
const handleChangeTabs = () => {
  rightContainerRef.value.handleChangeTab()
}
const handleRightChangeTabs = () => {
  leftContainerRef.value.handleOpenTabs()
}

const activeRecord = ref({})
const handleActive = (record) => {
  activeRecord.value = record
}
</script>

<style lang="less">
.c-main {
  display: flex;
  height: 100%;
  width: 100%;
}
</style>